<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <title>Dashio - Bootstrap Admin Template</title>

    <!-- Favicons -->
    <link rel="icon" th:href="@{img/favicon.png}"/>
    <link rel="apple-touch-icon" th:href="@{img/apple-touch-icon.png}"/>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{lib/bootstrap/css/bootstrap.min.css}"/>

    <!--external css-->
    <link rel="stylesheet" th:href="@{lib/font-awesome/css/font-awesome.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{css/zabuto_calendar.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{lib/gritter/css/jquery.gritter.css}"/>

    <link rel="stylesheet" th:href="@{css/style.css}"/>
    <link rel="stylesheet" th:href="@{css/style-responsive.css}"/>
    <script th:src="@{lib/chart-master/Chart.js}"></script>

</head>
<body>
<section id="container">
    <!--header start-->
    <header class="header black-bg" id="myHeadBar" th:fragment="myHeadBar">
        <div class="sidebar-toggle-box">
            <div class="fa fa-bars tooltips" data-placement="right" data-original-title="菜单栏"></div>
        </div>
        <!--logo start-->
        <a  class="logo"><b>Colorful<span>World</span></b></a>
        <!--logo end-->
        <div class="nav notify-row" id="top_menu">
            <!--  notification start -->
            <!--  notification end -->
        </div>

        <div class="top-menu">
            <form th:action="@{/logout}" method="post">
                <ul class="nav pull-right top-menu">
                    <li>

                        <input type="submit" class="logout" value="注销"/>

                    </li>
                </ul>
            </form>
        </div>
    </header>
    <!--header end-->
</section>
<!-- js placed at the end of the document so the pages load faster -->
<script th:src="@{lib/jquery/jquery.min.js}"></script>

<script th:src="@{lib/bootstrap/js/bootstrap.js}"></script>
<script class="include" type="text/javascript" th:src="@{lib/jquery.dcjqaccordion.2.7.js}"></script>
<script th:src="@{lib/jquery.scrollTo.min.js}"></script>
<script th:src="@{lib/jquery.nicescroll.js}" type="text/javascript"></script>
<script th:src="@{lib/jquery.sparkline.js}"></script>
<!--common script for all pages-->
<script th:src="@{lib/common-scripts.js}"></script>
<script type="text/javascript" th:src="@{lib/gritter/js/jquery.gritter.js}"></script>
<script type="text/javascript" th:src="@{lib/gritter-conf.js}"></script>
<!--script for this page-->
<script th:src="@{lib/sparkline-chart.js}"></script>
<script th:src="@{lib/zabuto_calendar.js}"></script>
<!--<script type="text/javascript" th:inline="javascript">
    $(document).ready(function() {
        var unique_id = $.gritter.add({
            // (string | mandatory) the heading of the notification
            title: 'Welcome to Dashio!',
            // (string | mandatory) the text inside the notification
            text: 'Hover me to enable the Close Button. You can hide the left sidebar clicking on the button next to the logo.',
            // (string | optional) the image to display on the left
            image: 'img/ui-sam.jpg',
            // (bool | optional) if you want it to fade out on its own or just sit there
            sticky: false,
            // (int | optional) the time you want it to be alive for before fading out
            time: 8000,
            // (string | optional) the class name you want to apply to that specific message
            class_name: 'my-sticky-class'
        });

        return false;
    });
</script>
<script type="application/javascript" th:inline="javascript">
    $(document).ready(function() {
        $("#date-popover").popover({
            html: true,
            trigger: "manual"
        });
        $("#date-popover").hide();
        $("#date-popover").click(function(e) {
            $(this).hide();
        });

        $("#my-calendar").zabuto_calendar({
            action: function() {
                return myDateFunction(this.id, false);
            },
            action_nav: function() {
                return myNavFunction(this.id);
            },
            ajax: {
                url: "show_data.php?action=1",
                modal: true
            },
            legend: [{
                type: "text",
                label: "Special event",
                badge: "00"
            },
                {
                    type: "block",
                    label: "Regular event",
                }
            ]
        });
    });

    function myNavFunction(id) {
        $("#date-popover").hide();
        var nav = $("#" + id).data("navigation");
        var to = $("#" + id).data("to");
        console.log('nav ' + nav + ' to: ' + to.month + '/' + to.year);
    }
</script>-->


<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{
            /headPic}]];
            $.ajax({
                type: "get",
                url: URL,
                data: {},
                success: function (data) {
                    console.log(data);
                    $("#headPic").attr("src", "data:image/gif;base64," + data);
                }
            });
        }
    );


</script>


</body>
</html>